<!DOCTYPE html>
<meta charset="utf-8">
<html>

<head>
    <title>微信语音样式</title>
    <style type="text/css">


        .box {
            align-items: center;
            box-sizing: border-box;
            position: relative;
            margin: 50px auto;
            display: flex;
        }

        .box img {
            width: 32px;
            height: 32px;
        }

        .wifi-symbol {
            width: 50px;
            height: 50px;
            box-sizing: border-box;
            overflow: hidden;
            transform: rotate(135deg);
            margin-left: 5px;
        }

        .wifi-circle {
            border: 3px solid #999999;
            border-radius: 50%;
            position: absolute;
        }



        .second {
            width: 20px;
            height: 20px;
            top: 38px;
            left: 38px;
            animation: fadeInOut 1s infinite 0.2s;
        }

        .third {
            width: 30px;
            height: 30px;
            top: 32px;
            left: 32px;
            animation: fadeInOut 1s infinite 0.4s;
        }

        @keyframes fadeInOut {
            0% {
                opacity: 0;
                /*初始状态 透明度为0*/
            }

            100% {
                opacity: 1;
                /*结尾状态 透明度为1*/
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <img
            src="" />
        <div class="wifi-symbol">
            <div class="wifi-circle second"></div>
            <div class="wifi-circle third"></div>
        </div>
    </div>
</body>

</html>